<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  style="height: 100%">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../js/echarts.min.js"></script>
    <script src="../js/jquery-1.7.1.js"></script>
    <title>加班工时管理系统</title>
    <link rel="stylesheet" href="../css/07TJBB.css">
</head>

<body>
<div class="body">
    <div class="top">
        <div class="nav-top">
            <div id="menu_left">
                <img src="../image/02main.jpg" />
            </div>
            <div class="title">
                <img class="img1" src="../image/daohangtiao1.jpg" />
                <div class="tab">
                    <table>
                        <tr>
                            <td><a href="/employee/02main" style="margin-left:6px; color:#cfdef7; font-family:黑体; font-size:12px;z-index:100;position:relative;">我的中心</a></td>
                        </tr>
                    </table>
                </div>
                <img class="img2" src="../image/daohangtiao1.jpg" />
                <div class="tab">
                    <table>
                        <tr>
                            <td><a href="/team/04dengji" style="margin-left:80px; color:#cfdef7; font-family:黑体; font-size:12px;z-index:100;position:relative;">在线登记</a></td>
                            <td><a href="/team/04dengji" style="color:#cfdef7; font-family:黑体;z-index:100;position:relative;">×</a></td>
                        </tr>
                    </table>
                </div>
                <img class="img3" src="../image/daohangtiao1.jpg" />
                <div class="tab">
                    <table>
                        <tr>
                            <td><a href="/whour/showWhour" style="margin-left:165px; color:#cfdef7; font-family:黑体; font-size:12px;z-index:100;position:relative;">工时查询</a></td>
                            <td><a href="/whour/showWhour" style="color:#cfdef7; font-family:黑体;z-index:100;position:relative;">×</a></td>
                        </tr>
                    </table>
                </div>
                <img class="img4" src="../image/daohangtiao2.jpg" />
                <div class="tab">
                    <table>
                        <tr>
                            <td><a href="/whour/06whour" style="margin-left:250px; color:#006ce0; font-family:黑体; font-size:12px;"><b>统计报表</b></a></td>
                            <td><a href="/whour/06whour" style="color:#a1a4a6; font-family:黑体;"><b>×</b></a></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="menu_rigth">
                <p class="p2">欢迎您，</p><p class="p1">${sessionScope.employee.name}</p>
                <ul>
                    <li class="li1"><a href="#"><img src="../image/daohangtiao_suo.jpg" style="margin-left:110px; width:18px; height:18px;"/></a></li>
                    <li class="li2"><a href="/index/signout"><img src="../image/daohangtiao_out.jpg" style="margin-left:140px; width:18px; height:18px;" /></a></li>
                </ul>
            </div>
        </div>
    </div>


    <div class="content">
        <div class="content1">
            <div class="content2">
                <div class="div1">
                    <div class="div1">
                        <span>查询时间</span>
                        <input type="date" value="2016-03-01" class="input2"/> - <input type="date" value="2016-03-01" class="input2"/>
                        <button class="button3">查询</button>
                    </div>

                    <div class="div2">
                        <h4>&nbsp;团队工时统计</h4>
                        <div id="container1"></div>
                        <script type="text/javascript">
                            var dom = document.getElementById("container1");
                            var myChart = echarts.init(dom);
                            option = null;
                            option = {
                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{a} <br/>{b}: {c}h ({d}%)'
                                },
                                series: [
                                    {
                                        name: '团队：CRM应用团队',
                                        type: 'pie',
                                        radius: ['25%', '50%'],
                                        startAngle:180,
                                        labelLine: {
                                            normal: {
                                                length: 15,
                                                length2: 70
                                            }
                                        },
                                        label: {
                                            formatter: '{b|{a}}\n {b|{b}：}{b|{c}h}  {per|{d}%} ',
                                            borderWidth: 20,
                                            borderRadius: 4,
                                            padding: [20, -30],
                                            rich: {
                                                a: {
                                                    float:'left',
                                                    color: '#999',
                                                    lineHeight: 20,
                                                    align: 'center',
                                                },
                                                b: {
                                                    fontSize: 14,
                                                    lineHeight: 33
                                                },
                                                per: {
                                                    color: '#eee',
                                                    backgroundColor: '#5a7087',
                                                    padding: [2, 3],
                                                    borderRadius: 2,
                                                }
                                            }
                                        },
                                        data: [
                                            {value: 400, name: '工时',itemStyle:{color: '#ff9b77'}},
                                            {value: 258, name: '工时',itemStyle:{color: '#ffe171'}},
                                            {value: 142, name: '工时',itemStyle:{color: '#bddc7f'}}
                                        ]
                                    }
                                ]
                            };;
                            if (option && typeof option === "object") {
                                myChart.setOption(option, true);
                            }
                        </script>
                        <p class="p5">总工时数</p >
                        <p class="p6">800<span class="span1">h</span></p >
                    </div>

                    <div class="div3">
                        <h4>&nbsp;<a href="/whour/06whour" style="color: black">员工工时统计</a></h4>
                        <div id="container2">
                            <div>
                                <p class="p2">排序方式：</p>
                                <div class="button2">
                                    <button class="button1">工时降序</button>
                                    <button class="button1">次数升序</button>
                                </div>
                                <div class="content4">
                                    <a href="#"><img src="../image/dian.jpg" /></a>
                                    <a href="#"><img src="../image/list.jpg" /></a>
                                </div>
                                <div class="content3">
                                    <table class="table1" rules=none>
                                        <tr>
                                            <th>姓名</th>
                                            <th style="width:70px;">工时[h]</th>
                                            <th style="width:70px;">次数[次]</th>
                                        </tr>
                                        <tr class="tr1">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr1">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr1">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr1">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr1">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr2">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr1">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr1">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr1">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr1">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                    </table>
                                    <table class="table2" rules=none>
                                        <tr class="tr1">
                                            <th>姓名</th>
                                            <th>工时[h]</th>
                                            <th>次数[次]</th>
                                        </tr>
                                        <tr class="tr1">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr1">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr2">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr2">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr1">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr1">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr2">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr2">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr2">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                    </table>
                                    <table class="table3" rules=none>
                                        <tr class="tr1">
                                            <th>姓名</th>
                                            <th>工时[h]</th>
                                            <th>次数[次]</th>
                                        </tr>
                                        <tr class="tr1">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr1">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr2">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr2">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr2">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr2">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr2">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr2">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr2">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                        <tr class="tr3">
                                            <td>黄盼盼</td>
                                            <td>191</td>
                                            <td>12</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="final">
                                    <a href="#" class="a1"><b> < </b></a>&nbsp;&nbsp;
                                    <select class="select1">
                                        <option value="第一页">第一页</option>
                                        <option value="第二页">第二页</option>
                                    </select>
                                    &nbsp;&nbsp;<a href="#" class="a2"><b> > </b></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="bottom">
            Copyright © 2015 中国电信股份有限公司福建分公司. All Rights Reserved
        </div>
    </div>
</body>
</html>